﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="../jquery-easyui-1.4.3/jquery-1.8.2.js"></script>
    <script src="../jquery-easyui-1.4.3/jquery.min.js"></script>
    <script src="../jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
    <link href="../themes/default/easyui.css" rel="stylesheet" />
    <link href="../themes/icon.css" rel="stylesheet" />
    <style type="text/css">
    </style>
    <script type="text/javascript">
        $(function () {
            //添加
            $("#btnInsert").click(function () {
                $("#dlg").dialog({ width: 400, height: 310 })
                .dialog("setTitle", "添加店铺")
                .dialog("open");
                $("#frm1").attr("src", "AddStore.html");
            });
            //修改
            $("#btnEdit").click(function () {
                var row = $("#dg").datagrid("getSelected");
                if (row != null) {
                    $("#dlg").dialog({ width: 400, height: 310 })
                    .dialog("setTitle", "修改店铺")
                    .dialog("open");
                    $("#frm1").attr("src", "EditStore.html");
                } else {
                    $.messager.alert("提示", "请选择需要修改的店铺！", "warning");
                }
            });
            //删除
            $("#btnDel").click(function () {
                var row = $("#dg").datagrid("getSelected");
                if (row != null) {
                    $.extend($.messager.defaults, {
                        ok: "确定",
                        cancel: "取消"
                    });
                    $.messager.confirm('提示', '你确定要删除选中的信息吗?', function (r) {
                        if (r) {
                            alert('删除成功！: ' + r);
                        }
                    });
                } else {
                    $.messager.alert("提示", "请选择需要删除的店铺！", "warning");
                }
            });
            //分配
            $("#btnAllocation").click(function () {
                var row = $("#dg").datagrid("getSelected");
                if (row != null) {
                    $("#dlg").dialog({ width: 310, height: 201 })
                 .dialog("setTitle", "分配管理员")
                 .dialog("open");
                    $("#frm1").attr("src", "AllocationAdministrator.html");
                } else {
                    $.messager.alert("提示", "请选择需要分配管理员的店铺！", "warning");
                }
            });
            //分页
            $('#dg').datagrid({
                pagination: true,
                fitColumns: true,
                toolbar: "#tb",
                singleSelect: true,
                rownumbers: true,
                url: '../jquery-easyui-1.4.3/demo/datagrid/datagrid_data1.json',
                method: "get",
                columns: [[
                    { field: 'productid', title: '产品Id', width: 350, align: 'center' },
                    { field: 'productname', title: '产品名称', width: 350, align: 'center' },
                    { field: 'unitcost', title: '单位成本', width: 350, align: 'center' }
                ]]
            });
        });
        (function ($) {
            function pagerFilter(data) {
                if ($.isArray(data)) {	// is array
                    data = {
                        total: data.length,
                        rows: data
                    }
                }
                var dg = $(this);
                var state = dg.data('datagrid');
                var opts = dg.datagrid('options');
                if (!state.allRows) {
                    state.allRows = (data.rows);
                }
                var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
                var end = start + parseInt(opts.pageSize);
                data.rows = $.extend(true, [], state.allRows.slice(start, end));
                return data;
            }
            var loadDataMethod = $.fn.datagrid.methods.loadData;
            $.extend($.fn.datagrid.methods, {
                clientPaging: function (jq) {
                    return jq.each(function () {
                        var dg = $(this);
                        var state = dg.data('datagrid');
                        var opts = state.options;
                        opts.loadFilter = pagerFilter;
                        var onBeforeLoad = opts.onBeforeLoad;
                        opts.onBeforeLoad = function (param) {
                            state.allRows = null;
                            return onBeforeLoad.call(this, param);
                        }
                        dg.datagrid('getPager').pagination({
                            onSelectPage: function (pageNum, pageSize) {
                                opts.pageNumber = pageNum;
                                opts.pageSize = pageSize;
                                $(this).pagination('refresh', {
                                    pageNumber: pageNum,
                                    pageSize: pageSize
                                });
                                dg.datagrid('loadData', state.allRows);
                            }
                        });
                        $(this).datagrid('loadData', state.data);
                        if (opts.url) {
                            $(this).datagrid('reload');
                        }
                    });
                },
                loadData: function (jq, data) {
                    jq.each(function () {
                        $(this).data('datagrid').allRows = null;
                    });
                    return loadDataMethod.call($.fn.datagrid.methods, jq, data);
                },
                getAllRows: function (jq) {
                    return jq.data('datagrid').allRows;
                }
            })
        })(jQuery);

        function getData() {
            var rows = [];
            for (var i = 1; i <= 800; i++) {
                var amount = Math.floor(Math.random() * 1000);
                var price = Math.floor(Math.random() * 1000);
                rows.push({
                    inv: 'Inv No ' + i,
                    date: $.fn.datebox.defaults.formatter(new Date()),
                    name: 'Name ' + i,
                    amount: amount,
                    price: price,
                    cost: amount * price,
                    note: 'Note ' + i
                });
            }
            return rows;
        }
        $(function () {
            $('#dg').datagrid({ data: getData() }).datagrid('clientPaging');
        });
    </script>
</head>
<body>
    <div id="tb">
        <div>
            <a id="btnInsert" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">新增</a>
            <a id="btnEdit" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">修改</a>
            <a id="btnDel" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a>
            <a id="btnAllocation" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">分配管理员</a>
        </div>
        <div>店铺名称：<input class="easyui-textbox" type="text" name="StoreName">联系人：<input class="easyui-textbox" type="text" name="StoreLeader">店铺地址：<input class="easyui-textbox" type="text" name="StoreAdd"><a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>  </div>
    </div>
    <table id="dg"></table>
    <div id="dlg" data-options="resizable:true,modal:true">
        <iframe id="frm1" width="99%" height="99%" frameborder="0" scrolling="no"></iframe>
    </div>
</body>
</html>
